import './index.less';
import  Lang from '../../libs/i18';
export default React.createClass({
    propTypes: {
        onselect: React.PropTypes.func,

    },
    getDefaultProps(){
        return {
            page: 1,
            pages: 1,
            onselect: function (page) {
                console.log(`select number ${page}`)
            }
        }
    },

    render(){
        const self = this;
        console.log(this.props.page);
        if (!self.props.page || !self.props.page.page) {
            return <div></div>
        }
        const cpage = this.props.page;
        return (
            <div className="page text-center">
                <div className="total" style={{float: 'left'}}>
                    <span>{Lang.pagination.NUMBERS_PER_PAGE}：</span>
                    <span>
                  <select className="form-control input-sm" onChange={(value)=> {
                      if (typeof this.props.onChange == "function") {
                          this.props.onChange(value.target.value);
                      }
                  }}>
                    <option value="15">15</option>
                    <option value="30">30</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                  </select>
                  </span>
                    <b>  &nbsp;&nbsp;&nbsp;&nbsp;{Lang.pagination.TOTAL}&nbsp;{ cpage.total}&nbsp;
                        {Lang.pagination.TOTAL_DESC}</b></div>
                {
                    <ul className="pagination">
                        <li><a href="javascript:void(0)"
                               onClick={()=> {
                                   if (cpage.page > 1) {
                                       self.props.onselect(1)
                                   }
                               }}
                        >{Lang.pagination.FIRST}</a></li>
                        <li><a href="javascript:void(0)"
                               onClick={()=> {
                                   if (cpage.page > 1) {
                                       self.props.onselect(cpage.page - 1)
                                   }
                               }}
                        >{Lang.pagination.LAST_PAGE}</a></li>
                        {
                            _.range(1, cpage.pages + 1).map((item, index)=> {
                                if ((cpage.page > item - 3) && (cpage.page < item + 3))
                                    return (
                                        <li className={cpage.page == item ? 'active' : ''} key={index}>
                                            <a href="javascript:void(0)" onClick={()=> {
                                                if (cpage.page != item) {
                                                    self.props.onselect(item)
                                                }
                                            }}>{item}</a>
                                        </li>
                                    );
                            })
                        }

                        {
                            (cpage.pages > cpage.page + 3) ?
                                <li >
                                    <a href="javascript:void(0)" onClick={()=> {

                                        self.props.onselect(cpage.pages + 1)

                                    }}>...</a>
                                </li> : ''
                        }
                        {
                            (cpage.pages > cpage.page + 2) ?
                                <li >
                                    <a href="javascript:void(0)" onClick={()=> {
                                        self.props.onselect(cpage.pages)
                                    }}>{cpage.pages}</a>
                                </li> : ''
                        }
                        <li><a
                            onClick={()=> {
                                if (cpage.page < cpage.pages) {
                                    self.props.onselect(cpage.page + 1)
                                }
                            }}
                            href="javascript:void(0)">{Lang.pagination.NEXT_PAGE}</a></li>
                        <li><a
                            onClick={()=> {
                                if (cpage.page < cpage.pages) {
                                    self.props.onselect(cpage.pages)
                                }
                            }}
                            href="javascript:void(0)">{Lang.pagination.LAST}</a></li>

                    </ul>
                }
            </div>
        )
    }
})